<template>
  <div v-if="visible" :class="`alert alert-${theme}`">
    <div v-if="message" class="alert-message">
      <slot name="message">{{ message }}</slot>
    </div>
    <button class="alert-close" @click="close">×</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';


const props = defineProps({
  theme: {
    type: String,
    default: 'info'
  },
  message: {
    type: String,
    default: ''
  },
  duration: {
    type: Number,
    default: 3000
  }
});

const visible = ref(true);

const close = () => {
  visible.value = false;
};

watch(visible, (newValue) => {
  if (newValue && props.duration > 0) {
    setTimeout(() => {
      visible.value = false;
    }, props.duration);
  }
});
</script>

<style scoped>
.alert {
  padding: 16px;
  border-radius: 4px;
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 10px 0;
  width: auto;
  max-width: 80%;
  text-align: center;
}

.alert-info {
  background-color: #e0f7fa;
  color: #00796b;
}

.alert-success {
  background-color: #e8f5e9;
  color: #388e3c;
}

.alert-warning {
  background-color: #fff3e0;
  color: #f57f17;
}

.alert-error {
  background-color: #ffebee;
  color: #c62828;
}

.alert-message {
  margin-right: 30px;
}

.alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}
</style>
